<template>
	<div class="home">
		<!--<my-swiper :items=carousel id="mySwiper"></my-swiper>-->
		<div class="swiper-container" id="header-swiper">
			<div class="swiper-wrapper">
				<div class="swiper-slide" v-for="(item,index) in carousel" :key=index>
					<img :src="item.pic">
				</div>
			</div>
			<div class="swiper-pagination"></div>
		</div>
		<div scroll-fixed="true" class="dynamic-tabs">
			<div class="scroll" style="transform: translate3d(0px, 0px, 0px) scale(1);">
				<ul class="tabs-container">
					<li :class="{'tab-item-active': category=='tuijian'}" @click="selChange('tuijian')">
						<div class="tab-item-text">推荐</div>
					</li>
					<li :class="{'tab-item-active': category=='nut'}" @click="selChange('nut')">
						<img class="tab-item-tag" src="http://pic10.cdn.3songshu.com:81//assets/upload/adv/dcbf5ff0a373baf8adc80df2c7ddba73.gif">
						<div class="tab-item-text">坚果/果干</div>
					</li>
					<li :class="{'tab-item-active': category=='retail'}" @click="selChange('retail')">
						<div class="tab-item-text">量贩组合</div>
					</li>
					<li :class="{'tab-item-active': category=='seafood'}" @click="selChange('seafood')">
						<div class="tab-item-text">肉脯/海鲜</div>
					</li>
					<li :class="{'tab-item-active': category=='snacks'}" @click="selChange('snacks')">
						<img class="tab-item-tag" src="http://pic10.cdn.3songshu.com:81//assets/upload/adv/6762bbfa218313c245ffa4eb4b16e6dc.gif">
						<div class="tab-item-text">休闲零食</div>
					</li>
					<li :class="{'tab-item-active': category=='gifts'}" @click="selChange('gifts')">
						<div class="tab-item-text">潮礼</div>
					</li>
					<li :class="{'tab-item-active': category=='tea'}" @click="selChange('tea')">
						<div class="tab-item-textg">茶饮</div>
					</li>
					<li :class="{'tab-item-active': category=='round'}" @click="selChange('round')">
						<img class="tab-item-tag" src="http://pic10.cdn.3songshu.com:81//assets/upload/adv/6762bbfa218313c245ffa4eb4b16e6dc.gif">
						<div class="tab-item-text">周边</div>
					</li>
				</ul>
			</div>
		</div>
		<!--<router-view></router-view>-->
		<home-recommend v-show="category=='tuijian'"></home-recommend>
		<home-category v-show="category=='nut'" :floors="nutFloors" :banner="nutBanner"></home-category>
		<home-category v-show="category=='retail'" :floors="retailFloors" :banner="retailBanner"></home-category>
		<home-category v-show="category=='seafood'" :floors="seafoodFloors" :banner="seafoodBanner"></home-category>
		<home-category v-show="category=='snacks'" :floors="snacksFloors" :banner="snacksBanner"></home-category>
		<home-category v-show="category=='gifts'" :floors="giftsFloors" :banner="giftsBanner"></home-category>
		<home-category v-show="category=='tea'" :floors="teaFloors" :banner="teaBanner"></home-category>
		<home-category v-show="category=='round'" :floors="roundFloors" :banner="roundBanner"></home-category>
		<div class="toTop" @click="toTop ">
		</div>
	</div>
</template>

<script>
import homeRecommend from "./homeRecommend";
import homeNut from "./homeNut";
import swiper from "./swiper";
export default {
	data() {
		return {
			category: "tuijian",
			carousel: [],
			//curFloors: [],
			//curBanner:{},
			nutFloors: [],
			nutBanner: {},
			retailFloors: [],
			retailBanner: {},
			seafoodFloors: [],
			seafoodBanner: {},
			snacksFloors: [],
			snacksBanner: {},
			teaFloors: [],
			teaBanner: {},
			roundFloors: [],
			roundBanner: {},
			giftsFloors: [],
			giftsBanner: {},
		}
	},
	mounted() {
		fetch("../../static/data/home/recommend.json")
			.then(res => res.json())
			.then(res => {
				this.carousel = res.data.carousel;
				new Swiper('#header-swiper', {
					autoplay: 3000,//可选选项，自动滑动
					pagination: '.swiper-pagination',
					loop: true,
					mousewheelControl: true,
					observer: true,
					observeParents: true,
				})
			});
		fetch("../../static/data/home/nut.json")
			.then(res => res.json())
			.then(res => {
				this.nutFloors = res.data.floors;
				this.nutBanner = res.data.banner;
			});
		fetch("../../static/data/home/retail.json")
			.then(res => res.json())
			.then(res => {
				this.retailFloors = res.data.floors;
				this.retailBanner = res.data.banner;
			});
		fetch("../../static/data/home/seafood.json")
			.then(res => res.json())
			.then(res => {
				this.seafoodFloors = res.data.floors;
				this.seafoodBanner = res.data.banner;
			});
		fetch("../../static/data/home/snacks.json")
			.then(res => res.json())
			.then(res => {
				this.snacksFloors = res.data.floors;
				this.snacksBanner = res.data.banner;
			});
		fetch("../../static/data/home/gifts.json")
			.then(res => res.json())
			.then(res => {
				this.giftsFloors = res.data.floors;
				this.giftsBanner = res.data.banner;
			});
		fetch("../../static/data/home/tea.json")
			.then(res => res.json())
			.then(res => {
				this.teaFloors = res.data.floors;
				this.teaBanner = res.data.banner;
			});
		fetch("../../static/data/home/round.json")
			.then(res => res.json())
			.then(res => {
				this.roundFloors = res.data.floors;
				this.roundBanner = res.data.banner;
			});
	},
	methods: {
		selChange(category) {
			this.category = category;
			console.log(this.category);
		},
		toTop() {
		    document.body.scrollTop = 0;		
		}
	},
	components: {
		"home-recommend": homeRecommend,
		"my-swiper": swiper,
		"home-category": homeNut,
	},
}
</script>

<style scoped>
@import "../../static/css/base.css";

.home {
	width: 100%;
	background: #F9F9F9;
	margin-bottom: 0.8rem;
}

#header-swiper {
	width: 100%;
	height: 3.5rem;
}

#header-swiper img {
	width: 100%;
	height: 3.5rem;
}

.dynamic-tabs {
	width: 100%;
	background: #fff;
	overflow-x: scroll;
}

.dynamic-tabs::-webkit-scrollbar {
	display: none;
}

.scroll {
	width: 100%;
}

.tabs-container {
	width: 150%;
	height: 0.4rem;
	font-size: 0.12rem;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.tabs-container li {
	position: relative;
	padding: 0 0.1rem;
	border-right: 1px solid #ddd;
}

.tabs-container li:last-child {
	border-right: none;
}

.tab-item-tag {
	width: 0.15rem;
	height: 0.09rem;
	position: absolute;
	right: -0.05rem;
	top: -0.05rem;
}

.tab-item-text {
	position: relative;
}

.tab-item-active {
	color: rgb(119, 188, 31);
}

.tab-item-active .tab-item-text::after {
	content: "";
	width: 100%;
	height: 0.02rem;
	background: rgb(119, 188, 31);
	position: absolute;
	bottom: -0.06rem;
	left: 0;
}
</style>